@import (reference) './_vars.less';
@import (reference) './_mixin.less';


:root {
    --color-bg: @color-bg;
    --color-primary: @color-primary;
    --color-secondary: @color-secondary;
    --color-muted: @color-muted;
    --color-hover: @color-hover;
    --color-active: @color-active;
    --color-border: @color-border;
    --color-link: @color-link;
    --color-link-hover: @color-link-hover;
    --color-nav: @color-nav;
    --color-aside: @color-aside;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #2b2e32;
        --color-primary: #eaeaea;
        --color-secondary: #a0a0a0;
        --color-muted: #a0a0a0;
        --color-hover: #393939;
        --color-active: #454444;
        --color-border: #434343;
        --color-link: #fd413c;
        --color-link-hover: #fd413c;
        --color-nav: #22252a;
        --color-aside: #282b30;
    }
}

html, body, .app {
    height: 100%;
}
body {
    color: @color-primary;
    color: var(--color-primary);
    background-color: @color-bg;
    background-color: var(--color-bg);
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 90;
    width: @size-nav-width + @size-aside-width;

    .nav, .aside {
        float: left;
    }
}

@content-vertical: 15px;
@content-horizontal: 30px;

.content {
    margin-left: @size-nav-width + @size-aside-width;
    padding: @content-vertical @content-horizontal;
    min-height: calc(~'100% -' @size-footer-height - @content-horizontal);
    overflow-x: hidden;
    overflow-y: auto;
    .animation(fade-in-down 0.6s 0.6s both);
}

.clearfix:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
}
.vm {
    vertical-align: middle;
}

.wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.page-hd {
    color: @color-primary;
    color: var(--color-primary);
    font-size: 2em;

    small {
        font-size: 0.6em;
        color: @color-muted;
        color: var(--color-muted);
        font-weight: normal;
    }
}


.keyframes(fade-in; {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
});
.keyframes(fade-in-down, {
    from {
        opacity: 0;
        .transform(translate3d(0, -10px, 0));
    }
    to {
        opacity: 1;
        .transform(none);
    }
});
.keyframes(fade-in-left, {
    from {
        opacity: 0;
        .transform(translate3d(10px, 0, 0));
    }
    to {
        opacity: 1;
        .transform(none);
    }
});

@media screen and (max-width: @size-mobile-screen-width) {
    html, body, .app {
        height: auto;
    }
    .header {
        position: none;
        position: static;
        width: auto;

        .nav, .aside {
            float: none;
        }
    }
    .content {
        margin-left: 0;
        padding: 10px 15px;
        min-height: calc(~'100vh -' @size-mobile-nav-height * 2 + @size-footer-height + 25px);
        overflow: initial;
    }
}
